﻿@model IEnumerable<EC18_ESHOP.Models.UserEmail>
@{
    ViewBag.Title = "UserEmail";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}

<div class="page-header position-relative">
    <h1>Quản lý khách hàng
			<small>
                <i class="icon-double-angle-right"></i>
                Tiếp thị sản phẩm qua email
            </small>
    </h1>
</div>

<form action="SendMail" method="post">
    <h4 class="header smaller lighter green">Soạn email</h4>
    <div class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="txtEmail">Chọn mẫu email có sẵn:</label>
            <div class="controls">
                <select id="cbEmail">
                    <option value="" />
@*                    <option value="A">Mẫu 1</option>
                    <option value="B">Mẫu 2</option>*@
                </select>
                <button class="btn btn-info" type="button" id="btnAddEmail">Thêm mẫu mới</button>
            </div>
        </div>


        <div class="control-group">
            <label class="control-label" for="editorEmail">
                Chỉnh sửa email:
            </label>
            <div class="controls">
                <textarea class="ckeditor" cols="80" id="editorEmail" name="editorEmail" rows="10">
			</textarea>
            </div>
            <br />
            <p class="controls">
                <button class="btn btn-info" type="button" id="btnSaveEmail"><i class="icon-ok bigger-110"></i>Lưu mẫu email</button>
            </p>
        </div>
    </div>

    <label class="control-label" for="editorThongTinCongTy">
        Chọn người gửi:
    </label>
        <table id="sample-table-2" class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th class="center">
                        <label>
                            <input type="checkbox" class="lbl">
                            @*<span class="lbl"></span>*@
                        </label>
                    </th>
                    <th>User ID</th>
                    <th>UserName</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr class="odd">
                        <td class="center">
                            <label>
                                @*@Html.CheckBox("checkedemail")
                            @Html.CheckBoxFor(modelItem => item.UserId)*@
                                <input type="checkbox" name="checkedemail" value="@item.Email"/>
                                @*<span class="lbl"></span>*@
                            </label>
                        </td>
                        <td class="hidden-480">@item.UserId</td>
                        <td class="hidden-480">@item.UserName</td>
                        <td class="hidden-480">@item.Email</td>
                    </tr>
                }
            </tbody>
        </table>
    <br />
    <p class="controls">
        <button class="btn btn-info" type="submit"><i class="icon-ok bigger-110"></i>Gửi</button>
    </p>
</form>

@section scripts{
    <script src="~/Content/ckeditor/ckeditor.js"></script>
    <script src="~/Content/assets/js/bootbox.js"></script>
    <script src="~/Content/assets/js/jquery.dataTables.js"></script>
    <script src="~/Content/assets/js/jquery.dataTables.bootstrap.js"></script>
    var listemail;
    <script type="text/javascript">
        $(function () {
            $.getJSON("LoadEmail", function (data) {
                //$('#editorThongTinCongTy').html(data.Info);
                listemail = data;
                for (var i = 0; i < data.length; i++) {
                    $("#cbEmail").append(new Option(data[i].Name, data[i].ID, false, false));
                }
            });

            $("#cbEmail").change(function () {
                var selected = $(this).find("option:selected");
                for (var i = 0; i < listemail.length; i++) {
                    if (listemail[i].ID == selected.val()) {
                        var content = $("<div/>").html(listemail[i].Content).text();
                        CKEDITOR.instances['editorEmail'].setData(content);
                    }
                }
            });

            $("#btnSaveEmail").click(function () {
                var emailID = $("#cbEmail").val();
                //getData() ko có encode sẵn, phải gọi thêm .tools.htmlEncode để encode
                var content = CKEDITOR.tools.htmlEncode(CKEDITOR.instances['editorEmail'].getData());
                $.post("SaveEmail", { ID: emailID, editorEmail: content }).done(function (data) {
                    if (data.success == true) {
                        bootbox.alert("Lưu thành công!", function () {

                        });
                        for (var i = 0; i < listemail.length; i++) {
                            if (listemail[i].ID == emailID) {
                                listemail[i].Content = content;
                            }
                        }
                    }
                });
            });
            

            $("#btnAddEmail").click(function () {
                bootbox.prompt("Tên mẫu", function (result) {
                    if (result === null) {

                    } else {
                        $.post("AddEmail", { name: result }).done(function (data) {
                            if (data.success == true) {
                                $("#cbEmail").append(new Option(result, data.ID, false, true));
                            }
                        });
                    };
                });
            });

            $('table th input:checkbox').on('click', function () {
                var that = this;
                $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

            });
            $('#sample-table-2').dataTable();
            //var oTable1 = $('#sample-table-2').dataTable({
            //    "aoColumns": [
			//      { "bSortable": false },
			//      null, null, null, null, null,
			//	  { "bSortable": false }
            //    ]
            //});

        });
    </script>
}